<template>
  <div class="app-container">
    <!--********************借阅记录********************* -->
    <div v-if="showBro">
      <el-button type="primary" size="mini" @click="close" style="margin-bottom:20px">返回</el-button>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="电子借阅" prop="online">
          <el-select v-model="queryParams.online" filterable placeholder="请选择">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实体借阅" prop="offline">
          <el-select v-model="queryParams.offline" filterable placeholder="请选择">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态" prop="auditState">
          <el-select v-model="queryParams.auditState" filterable placeholder="请选择审核状态">
            <el-option
              v-for="item in optionAudit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-date-picker
            v-model="daterangeApplyTime"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="审核时间">
          <el-date-picker
            v-model="daterangeAuditTime"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['system:borrow:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="borrowList">
        <el-table-column
          label="案卷题名"
          align="center"
          prop="archives.caseFileTitle"
          min-width="300px"
          show-overflow-tooltip
        />
        <el-table-column label="案卷责任人" align="center" prop="archives.personLiable" />
        <el-table-column label="申请人" align="center" prop="userName" />
        <el-table-column label="单位" align="center" prop="workUnit" />
        <el-table-column label="部门" align="center" prop="deptName" />
        <el-table-column label="岗位" align="center" prop="postName" />
        <el-table-column
          label="借阅说明"
          align="center"
          prop="borDetail"
          min-width="300px"
          show-overflow-tooltip
        />
        <el-table-column
          label="利用目的"
          align="center"
          prop="purpose"
          min-width="300px"
          show-overflow-tooltip
        />
        <el-table-column label="电子借阅" align="center" prop="online">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.online == 0">否</el-tag>
            <el-tag type="success" v-if="scope.row.online == 1">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="实体借阅" align="center" prop="offline">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.offline == 0">否</el-tag>
            <el-tag type="success" v-if="scope.row.offline == 1">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="借阅天数" align="center" prop="dayNum" />
        <el-table-column label="申请时间" align="center" prop="applyTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.applyTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核时间" align="center" prop="auditTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.auditTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核人员" align="center" prop="auditUser" />
        <el-table-column label="审核状态" align="center" prop="auditState" fixed="right">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.auditState == 1">申请中</el-tag>
            <el-tag type="success" v-if="scope.row.auditState == 2">审核通过</el-tag>
            <el-tag type="danger" v-if="scope.row.auditState == 3">审核拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="实体借阅归还状态" align="center" prop="objStr1">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.offline == 0">无需归还</el-tag>
            <el-tag type="info" v-else-if="scope.row.auditState != 2">无需归还</el-tag>
            <el-tag type="danger" v-else-if="scope.row.objStr1 == 0">未归还</el-tag>
            <el-tag type="success" v-else-if="scope.row.objStr1 == 1">已归还</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="归还时间" align="center" prop="objDate6" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.objDate6, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="查档操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tag
              v-if="isLimit(scope.row) === '查看文件'"
              @click="handleFindFile(scope.row.archivesId)"
              class="point"
            >查看文件</el-tag>
            <el-tag type="info" v-else>{{isLimit(scope.row)}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!--********************目录文件级********************* -->
    <ol v-loading="loading" v-if="!showBro">
      <div style="margin-bottom:20px">
        <el-button @click="showBro = true" type="primary" size="mini">返 回</el-button>
      </div>
      <div :key="item.fileId" v-for="(item, index) in fileList" v-if="item.archives.objStr1 == '2'">
        <el-row type="flex" justify="center">
          <el-col :span="10" :offset="2">
            <li>
              <span v-if="item.objStr1">{{item.objStr1}}的</span>
              <span v-if="item.docTitle">{{item.docTitle}}文件，</span>
              <span v-if="item.fileNo">文件编号{{item.fileNo}}，</span>
              <span v-if="item.pageCounts">页数{{item.pageCounts}}，</span>
              <span v-if="item.pageNo">页号{{item.pageNo}}</span>
            </li>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="14">
                <el-tag type="info" v-if="item.filePath == null">无文件</el-tag>
                <div v-if="item.filePath != null">
                  <span
                    :key="path"
                    class="el-upload-list__item ele-upload-list__item-content"
                    v-for="(path, index) in getFilePath(item.filePath)"
                  >
                    <el-link :href="path" :underline="false" target="_blank">
                      <span class="el-icon-document">{{getFileName(path)}}</span>
                    </el-link>
                  </span>
                </div>
              </el-col>
              <el-col :span="6" :offset="1">
                <el-tag type="info" v-if="item.imgPath == null">无图片</el-tag>
                <image-preview
                  v-if="item.imgPath != null"
                  :src="item.imgPath"
                  :width="50"
                  :height="50"
                />
                <el-tag
                  v-if="item.imgPath != null"
                  type="success"
                  class="point"
                  @click="printImage(item.imgPath)"
                >打印</el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
      <el-empty :image-size="200" v-if="fileList.length == 0" description="暂无文件数据"></el-empty>
    </ol>
  </div>
</template>

<script>
import {
  listBorrow,
  getBorrow,
  delBorrow,
  addBorrow,
  updateBorrow,
  updateApprove,
  updateReject
} from "@/api/system/borrow";
import print from "print-js";
import { getInfo } from "@/api/login";
import { listFile } from "@/api/system/file";

export default {
  name: "Borrow",
  data() {
    return {
      /******************文件目录查看************/
      // 项目根路径
      baseUrl: process.env.VUE_APP_BASE_API,
      // 显示案卷
      showBro: true,
      // 查询文件级返回结果
      fileList: [],
      /******************借阅记录***************/
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 借阅管理表格数据
      borrowList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 预留字段6时间范围
      daterangeApplyTime: [],
      // 预留字段6时间范围
      daterangeAuditTime: [],
      // 预留字段6时间范围
      daterangeObjDate6: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        archivesId: null,
        userId: null,
        userName: null,
        workUnit: null,
        deptName: null,
        postName: null,
        online: null,
        offline: null,
        auditState: null,
        applyTime: null,
        auditTime: null,
        auditUser: null,
        objStr1: null,
        objStr2: null,
        objStr3: null,
        objStr4: null,
        objInt5: null,
        objDate6: null
      },
      // 审核选项
      optionAudit: [
        {
          label: "申请中",
          value: "1"
        },
        {
          label: "审核通过",
          value: "2"
        },
        {
          label: "审核拒绝",
          value: "3"
        }
      ],
      // 是，否
      option: [
        {
          label: "否",
          value: "0"
        },
        {
          label: "是",
          value: "1"
        }
      ],
      check_online: true,
      check_offline: true,
      // 表单参数
      form: {},
      // 判断是否超级管理员
      isAdmin: false,
      // 表单校验
      rules: {}
    };
  },
  created() {
    getInfo().then(res => {
      for (let i in res.roles) {
        if (res.roles[i] === "admin" || res.roles[i] === "record_admin") {
          this.isAdmin = true;
          break;
        }
      }
      this.queryParams.userId = res.user.userId;
      this.getList();
    });
  },
  methods: {
    // 关闭
    close() {
      this.$router.push({ path: "/client/home" });
    },
    /** 查询借阅管理列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeApplyTime && "" != this.daterangeApplyTime) {
        this.queryParams.params["beginApplyTime"] = this.daterangeApplyTime[0];
        this.queryParams.params["endApplyTime"] = this.daterangeApplyTime[1];
      }
      if (null != this.daterangeAuditTime && "" != this.daterangeAuditTime) {
        this.queryParams.params["beginAuditTime"] = this.daterangeAuditTime[0];
        this.queryParams.params["endAuditTime"] = this.daterangeAuditTime[1];
      }
      if (null != this.daterangeObjDate6 && "" != this.daterangeObjDate6) {
        this.queryParams.params["beginObjDate6"] = this.daterangeObjDate6[0];
        this.queryParams.params["endObjDate6"] = this.daterangeObjDate6[1];
      }
      listBorrow(this.queryParams).then(response => {
        this.borrowList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        borrowId: null,
        archivesId: null,
        userId: null,
        userName: null,
        workUnit: null,
        deptName: null,
        postName: null,
        borDetail: null,
        purpose: null,
        online: null,
        offline: null,
        auditState: null,
        applyTime: null,
        auditTime: null,
        auditUser: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null,
        objStr1: null,
        objStr2: null,
        objStr3: null,
        objStr4: null,
        objInt5: null,
        objDate6: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeApplyTime = [];
      this.daterangeAuditTime = [];
      this.daterangeObjDate6 = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/borrow/export",
        {
          ...this.queryParams
        },
        `borrow_${new Date().getTime()}.xlsx`
      );
    },
    // 查看目录文件操作
    handleFindFile(archivesId) {
      this.loading = true;
      listFile({ archivesId: archivesId }).then(response => {
        this.loading = false;
        this.showBro = false;
        this.fileList = response.rows;
      });
    },
    /********************文件目录查询***************************/
    // 文件路径处理
    getFilePath(filePaths) {
      var arrayPath = filePaths.split(",");
      for (let i in arrayPath) {
        arrayPath[i] = this.baseUrl + arrayPath[i];
      }
      return arrayPath;
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
      } else {
        return "";
      }
    },
    // 打印图片
    printImage(imgPaths) {
      var arrayPath = imgPaths.split(",");
      for (let i in arrayPath) {
        arrayPath[i] = this.baseUrl + arrayPath[i];
      }
      print({
        printable: arrayPath,
        type: "image",
        imageStyle: "width:100%;margin-bottom:20px;"
      });
    },
    // 判断是否可以查看文件
    isLimit(item) {
      console.log(item)
      // 已审核、借阅天数大于0、线上借阅为1
      if (item.auditState == 2 && item.dayNum > 0 && item.online == 1) { 
        let startTime = new Date(item.applyTime); // 借阅时间
        let endTime = new Date(); // 当前时间
        let usedTime = endTime - startTime; // 相差的毫秒数
        let broTime = 24 * 3600 * 1000 * item.dayNum; // 借阅毫秒数
        // 借阅毫秒数 > 相差的毫秒数
        if (broTime - usedTime > 0) {
          return "查看文件";
        } else {
          return "已过期";
        }
      } else {
        return "无权限";
      }
    }
  }
};
</script>

<style lang="scss" scoped >
.point {
  cursor: pointer;
}
.el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}
.ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
ol {
  list-style: none;
  list-style-type: none;
  counter-reset: sectioncounter;
  li {
    margin-bottom: 12px;
    font-size: 14px;
  }
}
ol li:before {
  content: counter(sectioncounter) "、";
  counter-increment: sectioncounter;
  font-weight: bold;
  color: #fa9914;
  font-family: HelveticaNeue-Bold, HelveticaNeue;
}
</style>
